<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="样式">
            <!-- <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>分类</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-radio v-model="obj.group" :label="0">直线</el-radio>
                    <el-radio v-model="obj.group" :label="1">曲线</el-radio>
                </el-col>
            </el-row> -->
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>粗细</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.weight" min="1" class="miniinput" type="number" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>是否垂直</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-checkbox v-model="obj.shuxiang"></el-checkbox>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>颜色</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-color-picker v-model="obj.color" size="small" show-alpha :predefine="predefineColors"
                        popper-class="mycolorview" @active-change="setColorChange(obj, 'color', $event)" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>旋转</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-slider v-model="obj.rotate" :min="-180" :max="180" style="width:120px;display:inline-block;margin-right:8px;"></el-slider>
                    <input v-model.number="obj.rotate" min="-180" max="160" class="miniinput" type="number" style="width:60px;display: inline-block;vertical-align: middle;" />
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="事件">
            <event-form :obj="obj" />
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    name: "LineFigureForm",
    props: {
        predefineColors: Array,
        obj: Object,
        setColorChange: Function
    },
    model: {
        prop: "obj",
        event: "change",
    },
    components: {
        EventForm: () => import('../mixin/EventForm.vue'),
        BoxForm: () => import('../mixin/BoxForm.vue'),
    },
    methods: {

    }
}
</script>